<template>
    <van-tree-select

        v-model:main-active-index="activeIndex"
        :items="items"
        @click-item="onClickItem"
        class="tree-select"
        style="min-height: 50vh"
    />
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits} from 'vue';
const emit = defineEmits(['selectRoom']);

const props = defineProps<{
  selectRoomType: string;
}>();

const activeId = ref<number | null>(null);
const activeIndex = ref(0);
const items = ref<{ text: string, children: { text: string, id: number }[] }[]>([]);

const floors = JSON.parse(sessionStorage.getItem('floors') || '[]');
const floorRoomGroupMap = JSON.parse(sessionStorage.getItem('groupRoomsByFloor') || '{}');
console.log(floors)
console.log(floorRoomGroupMap)

// 组装 tree-select 数据结构
function generateItems() {
  items.value = floors.map((floor: any) => {
    const children = (floorRoomGroupMap[floor.id] || [])
        .filter((room: any) => room.type === props.selectRoomType)
        .map((room: any) => ({
          text: `${room.number} ${room.subType}`,
          id: room.id,
          room: room
        }));
    return { text: floor.name, children };
  }).filter(item => item.children.length > 0); // 只保留有房间的楼层
}

function onClickItem(item: any) {
  //console.log(item)
  emit('selectRoom', item.room);
}

onMounted(() => {
  generateItems();
});
</script>
<!--::v-deep(.van-tree-select__nav-item) {-->
<!--white-space: nowrap;-->
<!--}-->
<style scoped>



</style>
